<template>
  <view class="title-input" :class="{'is-border': isBorder}" @click.stop="_handleFocus">
    <view class="txt">{{txtObj.title}}</view>
    <view v-if="hasFocus" class="search-input">
      <view class="iconfont icon-search icon-focus"></view>
      <u-input
          v-model="keyword"
          :focus="hasFocus"
          :placeholder="txtObj.placeholder"
          height="72"
          style="width:100%;"
          @blur="_handleBlur"
      />
    </view>
    <view v-else class="iconfont icon-search icon-blur"></view>
  </view>
</template>

<script>
export default {
  name: 'titleInput',
  props: {
    type: {
      type: [String, Number], // type-->1:我的帮卖，2:我的供货
      default: 1
    },
    isBorder: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    txtObj() {
      const obj = {
        title: '帮卖列表',
        placeholder: '搜索帮卖昵称'
      }
      if (this.type == 2) {
        obj.title = '供货列表'
        obj.placeholder = '搜索供货昵称'
      }
      return obj
    }
  },
  data() {
    return {
      keyword: '',
      hasFocus: false, // 自动聚焦
    }
  },
  watch: {
    keyword(newTxt){
      this.throttle(this.allQueryData, null, 250, newTxt);
    },
  },
  methods: {
    // 点击聚焦
    _handleFocus() {
      this.hasFocus = true
    },
    // 失去焦点
    _handleBlur() {
      if (this.keyword) return
      this.hasFocus = false
    },
    // 节流函数
    throttle(fn,context,delay,text){
      clearTimeout(fn.timer);
      fn.timer = setTimeout(() => {
        fn.call(context,text);
      },delay);
    },
    allQueryData(text){
      this.$emit('searchFn',text) // 搜索方法
    },
  }
}
</script>

<style lang="scss" scoped>
.title-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 96rpx;
  padding: 0 32rpx;
  background-color: #FFFFFF;
  &.is-border {
    box-shadow: inset 0 -2rpx 0 #EBEDF0;
  }
  .txt {
    margin-right: 32rpx;
    font-size: 32rpx;
    line-height: 44rpx;
    font-weight: 500;
    color: $n8Color;
  }
  .icon-blur {
    font-size: 40rpx;
    color: $n8Color;
  }
  .search-input {
    display: flex;
    align-items: center;
    flex: 1;
    height: 72rpx;
    padding: 0 24rpx;
    border-radius: 40rpx;
    background-color: $n1Color;
  }
  .icon-focus {
    margin-right: 12rpx;
    font-size: 32rpx;
    color: #333333;
  }
}
</style>